  // @ts-nocheck
  // vue2 模拟 Vue的data
  const data = {
    msg: ''
  }
  // 模拟 Vue 实例
  const vm = {

  }

  function proxyData(pData, key) {
    Object.defineProperty(pData, key, {
      // 获取数据
      get() {
        return data[key]
      },
      // 给vue实列设置属性和值
      set(newValue) {
        // 值一样不更新
        if (newValue === data[key]) return
        // 2.data[key]更新
        data[key] = newValue
      }
    })
  }
  proxyData(vm, 'msg')

  export const myFunction = () => {
    const x = document.querySelector('#ipt1')
    // 1、vm.msg值被检测到变化后,更新data.msg
    vm.msg = x.value
    document.getElementById('vue2span').innerHTML = data.msg;// 3、在div节点上显示
  }

  // vue3
  const data2 = {
    msg: ''
  }

  const vm2 = new Proxy(data2, {
    get(target, key) {
      return target[key]
    },
    set(target, key, newValue) {
      console.log(111, target, key, newValue);
      
      if (target[key] === newValue) return
      // 2.data的属性更新了
      target[key] = newValue
    }
  })
  
  export const myFunction2 = () => {
    const x = document.querySelector('#ipt2')
    // 1、vm.msg值被检测到变化后, proxy代理根据变化更新data
    data2.msg = x.value
    // 3.页面上值的被更新
    document.getElementById('vue3span').innerHTML = vm2.msg
  }